<template>
  <div class="image-detail-container">
        <div class="SearchTop image-control">
            <el-form :model="queryParams" ref="queryRef" :inline="true" @submit.native.prevent>   
                <el-form-item label="视频搜索：">
                    <el-input v-model="queryParams.originalName" placeholder="请输入" clearable @keyup.enter="handleQuery" />
                </el-form-item>     
                <el-form-item style="margin-right: auto;">
                    <el-button type="primary" icon="Search" @click="handleQuery">查询</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    <span style="margin-left:38px;">素材容量:{{capacity.num}}张</span>
                    <span style="margin-left:30px;">容量:{{capacity.takeUpSpace}}/{{capacity.authSpace}}</span>
                </el-form-item>                                                              
                <el-form-item style="float: right;">
                    <el-button type="primary" plain icon="UploadFilled" @click="handleUpload">上传</el-button>                    
                    <el-button @click="handleSelectionChange" type="info" plain icon="finished">{{isAllChoose ? '全选' :'全部取消'}}</el-button>                    
                    <!-- <el-dropdown @command="handleCommand" style="margin:0 10px;" trigger="click">
                        <el-button type="info" plain icon="rank">移动至</el-button> 
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item v-for="(item,index) in groupList" :key="index" :command="item">{{item.title}}</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>                     -->
 
                    <el-button type="danger" plain icon="Delete"  @click="handleDelete">删除</el-button>                                                          
                </el-form-item>                  
            </el-form>
        </div>      
        <div class="tableList image-list">
            <div class="SearchTop">
                <div class="image-nav">
                    <span @click="$router.back(-1)">图片素材管理 > </span>
                    <span :style="showFlag ? '' : 'color:#0096FF'" @click="showFlag = false,rowActiveImg={}">{{groupData?.title}}</span>
                    <span>{{showFlag ? ' > ' : ''}}</span>
                    <span :style="showFlag ? 'color:#0096FF' : ''">{{showFlag ? '裁剪' : ''}}</span>
                </div>   
            </div>    
            <div v-show="!showFlag" class="image-list-wrap">
                <div class="img-item-wrap" @click="handleShow(item,index,$event)" v-for="(item,index) in imgList" :key="index" :class="item.flag ? 'active' : ''">
                    <div @click="item.flag = !item.flag" class="album-btn"></div>
                    <video  :src="item.url" alt=""></video>
                    <span  class="album-name" :title="item.originalName" >{{item.originalName}}</span>
                </div>
            </div> 
            <div v-show="showFlag" class="image-list-wrap" >
                <div class="img-active-show">
                    <span class="left-btn" @click="rowActiveIndex == 0 ? '' : rowActiveIndex -= 1"></span>
                    <img :src="rowActiveImg.url" alt="">
                    <span class="right-btn" @click="rowActiveIndex == rowImgList.length - 1 ? '' : rowActiveIndex += 1"></span>
                    <div class="show-name">{{rowActiveImg.originalName}}</div>
                </div>
                <div class="img-text-box">
                    <p class="title">图片路径:</p>
                    <p :title="rowActiveImg.url">{{rowActiveImg.url}}</p>
                    <p class="title">原始文件名:</p>
                    <p :title="rowActiveImg.fileName">{{rowActiveImg.fileName}}</p>
                    <p class="title">图片大小:</p>
                    <p>{{rowActiveImg.size}}</p>
                    <p class="title">图片尺寸:</p>
                    <p>{{rowActiveImg.resolution}}</p>
                    <p class="title">上传时间:</p>
                    <p>{{rowActiveImg.createTime}}</p>
                </div>
                <div class="img-list-row">
                    <div class="row-item" @click="rowActiveIndex = index,rowActiveImg = item" v-for="(item,index) in rowImgList" :key="item" :class="rowActiveIndex == index ? 'active' : ''">
                        <img :src="item.url" >
                    </div>
                </div>
            </div>    
        </div>  
    <el-dialog  v-model="videoShow" :lock-scroll="true" center  custom-class="video-dialog">
        <video width="640" height="360" style="position: relative;left: 50%;transform: translateX(-50%);object-fit:fill;" :src="videoShowUrl" autoplay  controls></video>
    </el-dialog>
    <UploadDialog ref="upload" @refresh="getList" />                 
  </div>
</template>

<script setup>
import UploadDialog from './uploadDialog.vue'
import { resourceCapacity, deleteData,resourceGroupList,moveResource,resourceList } from "@/api/CMS/image";
const { proxy } = getCurrentInstance();
const isAllChoose =ref(true)
const rowActiveIndex = ref(0)
const showFlag = ref(false)
watch(rowActiveIndex,(index)=>{
    rowActiveImg.value = rowImgList.value[index]
})
let data = reactive({
    queryParams: {
        originalName:'',
    },
    groupData:JSON.parse(sessionStorage.getItem('groupData')),
    capacity:{},
    imgList:[],
    rowActiveImg:{},
    rowImgList:[],
    groupList:[]
});
const { queryParams,groupData,capacity,imgList,rowActiveImg,rowImgList,groupList  } = toRefs(data);
// 获取容量
function getCapacity() {
    resourceCapacity().then(res => {
        if(res.code == 200) {
            capacity.value = res.data
        }
    })
}
getCapacity()
// 获取列表
function getList() {
    queryParams.value.groupId = groupData.value.id
    resourceList(queryParams.value).then(response => {
        if (response.code == 200) {
            imgList.value = response.rows
            imgList.value.forEach(ele=>{
                ele.flag = false
            })
            showFlag.value = false
        }
    })   
    getCapacity()     
}
getList()

function handleQuery() {
    getList()
}

function resetQuery() {
    queryParams.value = {}
    handleQuery();
    console.log('reset')
}

function handleUpload() {
    proxy.$refs["upload"].add(50,['mp4']);
}
/** 选择条数  */
function handleSelectionChange() {
    // 全选
    if(isAllChoose.value) {
        imgList.value.forEach(ele => {
            ele.flag = true
        })
    }
    // 全部取消
    else {
        imgList.value.forEach(ele => {
            ele.flag = false
        })        
    }
    isAllChoose.value = !isAllChoose.value    
};

/** 删除按钮操作 */
function handleDelete() {
    let ids = []
    console.log(imgList.value)
    imgList.value.map(ele => {
        if(ele.flag) {
            ids.push(ele.ossId)
        }
    })
    if(JSON.stringify(rowActiveImg.value) != '{}') {
        ids = [rowActiveImg.value.ossId]
    }
    if(ids.length == 0) {
        proxy.$modal.msg('请先选择需要删除的视频')
        return
    }
    proxy.$modal.confirm('是否确认删除').then(function () {
        return deleteData(ids);
    }).then((res) => {
        if(res.code == 200) {
            getList();
            proxy.$modal.msgSuccess("删除成功");
        }
    }).catch(() => {});
};
const videoShow = ref(false)
const videoShowUrl = ref('')
// 切换展示,并获取详情
function handleShow(item,index,event) {
    if(event.target.className.indexOf('album-btn') >= 0) {
        return
    }      
    videoShow.value = true
    videoShowUrl.value = item.url
    // console.log(item)
    // rowActiveImg.value = item
    // showFlag.value = !showFlag.value
    // rowImgList.value = imgList.value.slice(index,index + 8)
    
}
// 获取选项和移动相关
function getGroupOption() {
    resourceGroupList(queryParams.value).then(response => {
        if (response.code == 200) {
            groupList.value = response.rows
        }
    })   
}
getGroupOption()

function handleCommand(command) {
    let ids = []
    let data = {}
    data.groupId = command.id
    imgList.value.map(ele => {
        if(ele.flag) {
            ids.push(ele.ossId)
        }
    })
    if(JSON.stringify(rowActiveImg.value) != '{}') {
        ids = [rowActiveImg.value.ossId]
    }
    if(ids.length == 0) {
        proxy.$modal.msg('请先选择需要移动的图片')
        return
    }
    data.ids = ids
    proxy.$modal.confirm('是否确认移动').then(function () {
        return moveResource(data);
    }).then((res) => {
        if(res.code == 200) {
            getList();
            proxy.$modal.msgSuccess("移动成功");
        }
    }).catch(() => {});
}
</script>

<style lang="scss">
.tableList.image-list {
    padding-bottom: 0;
    padding-top: 0;
    .SearchTop {
        height: 58px;
        line-height: 58px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #F1F1F1; 
    }
   .image-list-wrap {
        padding:30px 0 20px 34px;
        height: 660px;
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        position: relative;
        ::-webkit-scrollbar {

        }   
        .img-item-wrap.active {
            .album-btn {
                background: url('@/assets/images/app/albumgouxuan.png');
            }
            .span {
                color: #0096FF;
            }
        }
        .img-item-wrap {
            display: inline-block;
            position: relative;            
            width: 180px;
            height: 140px;
            border-radius: 4px;    
            box-sizing: border-box;    
            margin-right: 52px;
            margin-bottom: 76px;     
            video {
                width: inherit;
                height: inherit;
                object-fit: cover;
            }
            img {
                width: 180px;
                height: 140px;
                border-radius: 4px;    
                object-fit: cover;
            }     
            .album-btn {
                z-index: 1;
                position: absolute;
                right: 5px;
                top: 5px;
                width: 30px;
                height: 30px;
                cursor: pointer;
                background: url('@/assets/images/app/albumweixuan.png');
            }         
            .album-name {
                width: 180px;
                overflow: hidden;
                text-overflow: ellipsis;
                text-align: center;
                white-space: nowrap;
                font-size: 14px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #333333; 
                position: absolute;
                left: 50%;
                transform: translateX(-50%);                   
                bottom: -30px;
            }                     
        }     
        .img-active-show {
            user-select: none;
            position: absolute;
            top: 60px;
            left: 26%;
            width: 680px;
            .show-name {
                white-space: nowrap;
                font-size: 16px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #333333; 
                position: absolute;
                left: 50%;
                transform: translateX(-60%);
                top: -40px;                
            }               
            img {
                width: 500px;
                height: 400px;
                border-radius: 4px;   
                background: #ccc;     
                margin:0 45px;        
            }
            span {
                display: inline-block;
                width: 36px;
                height: 40px;
                margin-bottom: 180px;
                cursor: pointer;
            }
            .left-btn {
                background: url('@/assets/images/app/zuo.png');
            }
            .right-btn {
                background: url('@/assets/images/app/you.png');
            }
        }
        .img-text-box {
            padding: 0 20px 20px;
            position: absolute;
            right: 50px;
            top: 60px;
            width: 294px;
            height: 390px;
            border: 2px solid #DFDDDD;
            border-radius: 4px;  
            p {
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin: 0 0 13px;
                padding: 0;
                width: 265px;
                font-size: 14px;
                font-family: Source Han Sans CN;
                font-weight: 400;
                color: #333333;
            }     
            .title {
                margin-top: 24px;
                font-weight: 500px;
            }     
        }
        .img-list-row {
            padding: 0 90px;
            width: 100%;
            height: 114px;
            position: absolute;
            bottom: 35px;
            .row-item {
                display: inline-block;
                position: relative;
                cursor: pointer;
                margin-right: 36px;
                width: 146px;
                height: 114px;
                border-radius: 4px;
                img {
                    width: 146px;
                    height: 114px;
                    object-fit: cover;
                }
            }
            .row-item.active {
                &::before {
                    left: 0;
                    top: 0;
                    content: '';
                    position: absolute;
                    width: 146px;
                    height: 114px;  
                    border: 6px solid #0096FF;
                    border-radius: 4px;                  
                }        
            }
        }
   }

}
.el-dialog.el-dialog--center.video-dialog{
    margin-top: 25vh !important;
}
</style>